<template>
  <div id="head-box">
    <div id="logo"></div>
    <div id="title">智慧石交通</div>
    <roadButton></roadButton>
    <reportButton></reportButton>
    <noticeButton></noticeButton>
    <toolbox></toolbox>
    <searching></searching>
    <id></id>
  </div>
</template>

<script setup>
import roadButton from '../components/roadButton.vue';
import searching from '../components/searching.vue';
import reportButton from '../components/reportButton.vue'
import toolbox from '../components/toolbox.vue'
import noticeButton from '../components/noticeButton.vue'
import id from '../components/id.vue'
</script>
<style scoped>
#head-box {
  width: 100vw;
  height: 4.5vw;
  display: flex;
  position: absolute;

  float: inline-start;
  background-color: rgb(245, 245, 245);
  opacity: 0.95;
  box-shadow: 0px 5px 5px grey;
  top: 0px;
}

#logo {
  background: url('../assets/logo.png') no-repeat center center;
  width: 100px;
  height: 100%;
  background-size: cover;
  margin-left: 100px;
}

#title {
  line-height: 80px;
  display: flex;
  font-size: 40px;
  font-family: "华文楷体";
  /*设置字体*/
  font-weight: 400;
  text-align: center;
  /*设置文字居中*/
  margin-left: 20px;
  letter-spacing:10px;
  /*设置外边距*/
  padding: 5px;
  /*设置内边距*/
}</style>